<!-- 
  工单操作台 - 用户处理 的统计面板

 -->
<template>
  <ContainerLayoutV2 ref="containerLayoutRef" class="project-statistics-2">
    <template #tables>
      <div style="display: flex; flex-direction: column; height: 100%">
        <div style="display: flex; justify-self: start; margin-bottom: 16px">
          <WorkOrderStatsCards :cards-data-list="statsCardsData" @click="handleClickCardItem" />
        </div>
        <div style="text-align: left">
          <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item v-if="false">
              <el-button type="primary" plain :icon="Plus" @click="handlerBtnAdd">新建</el-button>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="formData.name" style="width: 120px" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="创建人">
              <el-input v-model="formData.createUser" style="width: 120px" placeholder="请输入创建人" />
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="formData.woCategory" placeholder="请选择类型" clearable style="width: 100px">
                <el-option v-for="item in woCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.woStatus" placeholder="请选择状态" clearable style="width: 100px">
                <el-option v-for="item in woStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="优先级">
              <el-select v-model="formData.woPriority" placeholder="请选择优先级" clearable style="width: 100px">
                <el-option v-for="item in woPriorityOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间段">
              <el-date-picker v-model="formData.dateRange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 270px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleClickBtnQuery" :icon="Search">查询</el-button>
              <el-button @click="handleClickBtnReset" :icon="Refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-bottom: 10px; flex: 1; overflow: auto" ref="refStatisticsSection">
          <el-table ref="dataTable" :data="tableData" :height="tableHeight" border width="100%" header-cell-class-name="table-header-row" empty-text="没有数据">
            <el-table-column prop="id" label="序号" width="80" fixed />
            <el-table-column prop="name" label="工单标题" min-width="120" />
            <el-table-column prop="userName" label="创建人" min-width="90" />
            <el-table-column label="类型" width="80">
              <template #default="scope">{{ getWoCategoryText(scope.row.woCategory) }}</template>
            </el-table-column>
            <el-table-column label="状态" width="80">
              <template #default="scope">
                <el-text :type="getWoStatusType(scope.row.woStatus)">{{ getWoStatusText(scope.row.woStatus) }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="优先级" width="120">
              <template #default="scope">
                <el-text :type="getWoPriorityType(scope.row.woPriority)">
                  {{ getWoPriorityText(scope.row.woPriority) }}
                  <el-icon v-for="item in scope.row.woPriority + 1" :key="item" :size="20" :style="{ color: getElementColorVar(getWoPriorityType(scope.row.woPriority)) }">
                    <StarFilled />
                  </el-icon>
                </el-text>
              </template>
            </el-table-column>
            <el-table-column label="解决方案" width="120">
              <template #default="scope">
                <el-text>{{ getWoSolutionText(scope.row.woSolution) }} </el-text>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="80" />
            <el-table-column label="操作" width="90" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handlerBtnDetail(scope.row)" :icon="Edit">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="dataTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </template>
  </ContainerLayoutV2>
  <DialogWorkOrderEdit ref="dialogWorkOrderEditRef" @submited="getDataInfo" />
  <DialogWorkOrderUpdateSolution ref="dialogWorkOrderUpdateSolutionRef" @submited="getDataInfo" />
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, useTemplateRef } from 'vue'
import { Plus, Refresh, Search, StarFilled, Edit } from '@element-plus/icons-vue'
import ContainerLayoutV2 from '../../layout/ContainerLayoutV2.vue'
import DialogWorkOrderUpdateSolution from './DialogWorkOrderUpdateSolution.vue'
import DialogWorkOrderEdit from './DialogWorkOrderEdit.vue'
import { woCategoryOptions, woStatusOptions, woPriorityOptions } from './WorkOrderOptions'
import WorkOrderStatsCards from './WorkOrderStatsCards.vue'
import { useWorkOrder } from './useWorkOrder'
import { useUsersStore } from '../../stores'
import { getWoStatusType, getWoPriorityType, getElementColorVar, getWoStatusText, getWoPriorityText, getWoSolutionText, getWoCategoryText } from './workOrderTypeUtils'

// 使用 composable
const { currentPage, pageSize, dataTotal, tableData, statsCardsData, formData, getDataInfo, handleSizeChange, handleCurrentChange, handleClickBtnQuery, handleClickBtnReset, handleClickCardItem } = useWorkOrder()

const refStatisticsSection = ref()
const dialogWorkOrderEditRef = useTemplateRef('dialogWorkOrderEditRef')
const dialogWorkOrderUpdateSolutionRef = useTemplateRef('dialogWorkOrderUpdateSolutionRef')
const tableHeight = ref(500)

onMounted(() => {
  nextTick(() => {
    tableHeight.value = refStatisticsSection.value.clientHeight
  })
  formData.woUserName = useUsersStore().getAllState().username
  formData.woCategory = null
  formData.woStatus = null
  formData.woPriority = null
  getDataInfo()
})

const handlerBtnAdd = () => {
  dialogWorkOrderEditRef.value?.open()
}
const handlerBtnDetail = (row: any) => {
  dialogWorkOrderUpdateSolutionRef.value?.open(row)
}
</script>
